<template>
  <ToolbarButton
    icon="i-ri-page-separator"
    title="分页符"
    shortcut="Ctrl+Enter"
    :active="false"
    :large-icon="props.largeIcon"
    :hide-text="props.hideText"
    @click="insertPageBreak"
  />
</template>

<script setup lang="ts">
import { inject, type Ref } from 'vue'
import type { Editor } from '@tiptap/vue-3'
import ToolbarButton from "../../../button/index.vue";

defineOptions({
  name: 'PageBreak',
})

const props = withDefaults(
  defineProps<{
    largeIcon?: boolean;
    hideText?: boolean;
  }>(),
  {
    largeIcon: false,
    hideText: true,
  }
);

const editor = inject<Ref<Editor | null>>('editor')

const insertPageBreak = () => {
  if (!editor?.value) return
  
  editor.value.chain().focus().setPageBreak().run()
}
</script>

